<template>
  <div>
    <!-- 头部 -->
    <section class="page-header">
      <h1 class="project-name">LIANG</h1>
      <h2 class="project-tagline">你站在桥上看风景。</h2>
      <g-link to='/' class="btn">主页</g-link>
      <a
        href="https://github.com/GitHub-Laziji/vblog"
        class="btn"
        target="_blank"
        >博客源码</a
      >
    </section>

    <!-- 个人信息条 -->
    <section class="profile-card">
      <el-card shadow="never" :body-style="{ padding: '5px' }">
        <el-row>
          <el-col :span="4">
            <el-menu mode="horizontal" menu-trigger="click">
              <el-submenu index="#more">
                <template slot="title">了解博主</template>
                <el-menu-item index="#githubHome">
                  <span @click="toGithub(user.html_url)">github 主页</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :span="4" :offset="14" style="text-align: right;">
            <div style="font-size: 20px;color:#606266;margin-top: 5px">
              <b>{{ user.name }}</b>
            </div>
            <div style="color:#606266;">
              <i class="el-icon-location"></i>&nbsp;{{ user.location }}
            </div>
          </el-col>
          <el-col :span="2" style="text-align: center;">
            <img
              v-popover:bigAvatar
              :src="user.avatar_url"
              style="margin-top: 4px;margin-right: 10px;width:52px; height:52px; border-radius:5px; border: 1px solid #EBEEF5"
            />
            <el-popover
              ref="bigAvatar"
              placement="top-start"
              :title="user.login"
              width="200"
              trigger="hover"
            >
              <i class="el-icon-star-on"></i>&emsp;{{ user.name }}
              <br />
              <i class="el-icon-location"></i>&emsp;{{ user.location }}
              <br />
              <img
                :src="user.avatar_url"
                style="width: 200px;height: 200px;"
              />
            </el-popover>
          </el-col>
        </el-row>
      </el-card>
    </section>

    <!-- 中间 -->
    <section class="main-content">
      <el-row>
        <el-col :span="6" style="padding-right:10px">
          <!-- 侧边栏 -->
          <app-sidebar />
        </el-col>
        <el-col :span="18" style="padding-left:10px">
          <section>
            <!-- 内容出口 -->
            <slot></slot>
          </section>
        </el-col>
      </el-row>
    </section>

    <!-- 底部 -->
    <section class="foot">
      <app-foot />
    </section>
  </div>
</template>

<static-query>
query {
	allUser {
    edges {
      node {
        name
        login
       	location
        html_url
        avatar_url
      }
    }
  }
}
</static-query>

<script>
import AppSidebar from '~/components/AppSidebar'
import AppFoot from '~/components/AppFoot'

export default {
  name: 'Layout',
  components: {
    AppSidebar,
    AppFoot
  },
  computed: {
    user () {
      return this.$static.allUser.edges[0].node
    }
  },
  methods: {
    toGithub (url) {
      window.open(url)
    }
  },
}
</script>

<style>
</style>
